<template>
  <view class="page">
    <u-sticky bgColor="#000">
      <u-tabs :list="navList" @click="handlechange" :activeStyle="{
                color: '#FFBB50',
            }" :inactiveStyle="{
                color: '#FFBB50',
            }" lineColor="#FFBB50" keyName="text" :scrollable="false"></u-tabs>
    </u-sticky>
    <view class="vip-1" id="g1">
      <view class="vip-1-title">成为VIP会员享受特惠福利</view>
      <view class="vip-1-box">
        <view class="vip-1-box-1">
          <image :src="imgApi+'images/wallet/icon-12.png'" mode="scaleToFill" class="back-img" />
          <view class="vip-1-1">会员折扣限时领取</view>
          <view class="vip-1-2">现在开通 低至 <span>0.82元/天</span></view>
          <image :src="imgApi+'images/wallet/icon-13.svg'" mode="scaleToFill" class="img-1" />
          <view class="vip-1-3">VIP会员</view>
          <view class="vip-1-4">￥299/年</view>
          <view class="vip-1-5">VIP的3大权益</view>
          <view class="vip-1-6 flex">
            <view class="vip-1-6-item">
              <view class="vip-1-6-item-img">
                <image :src="imgApi+'images/wallet/icon-14.svg'" mode="scaleToFill" />
              </view>
              个人身份升级
            </view>
            <view class="vip-1-6-item">
              <view class="vip-1-6-item-img">
                <image :src="imgApi+'images/wallet/icon-15.svg'" mode="scaleToFill" />
              </view>
              赠送1000旺币
            </view>
            <view class="vip-1-6-item">
              <view class="vip-1-6-item-img">
                <image :src="imgApi+'images/wallet/icon-16.svg'" mode="scaleToFill" />
              </view>
              赠送认证店铺
            </view>
          </view>
        </view>
        <view class="vip-1-box-2">
          <view class="vip-1-2-1">会员礼遇豪礼盘点</view>
          <view class="vip-1-2-2">1.免费查看和联络所有的商户资源。</view>
          <view class="vip-1-2-2">2.享受免费专区内的下载方案的权限。</view>
          <view class="vip-1-2-2">3.享受购买方案会员的会员优惠价格。</view>
          <view class="vip-1-2-2">4.享受共享产品和海报的会员优惠价格。</view>
          <view class="vip-1-2-2">5.享受购买课程学习和活动参与的会员优惠价格。</view>
          <view class="vip-1-2-2">6.享受客户在所在地和目的地的提交需求的有限参与权。</view>
          <view class="vip-1-2-2">7.优于非会员获得当前地域内的优先排名。</view>
          <view class="vip-1-2-2">8.添加官方客服，免费加入蚂蚁团建社群结识资人脉源。</view>
          <view class="vip-1-2-1" style="width: 559rpx;margin-top: 60rpx;" @click="handleJoin">加入会员</view>
        </view>
      </view>
      <view class="vip-1-box" style="margin-top: 54rpx;">
        <view class="vip-1-box">
          <view class="vip-1-box-1">
            <image :src="imgApi+'images/wallet/icon-17.png'" mode="scaleToFill" class="back-img" style="height: 602rpx;" />
            <view class="vip-1-3" style="top: 20rpx;">VIP会员</view>
            <view class="vip-1-4" style="top: 66rpx;">￥299/年</view>
            <view class="vip-1-5" style="top: 166rpx;">VIP会员权益3+2</view>
            <view class="vip-1-6 flex" style="bottom: 250rpx;">
              <view class="vip-1-6-item">
                <view class="vip-1-6-item-img">
                  <image :src="imgApi+'images/wallet/icon-14.svg'" mode="scaleToFill" />
                </view>
                个人身份升级
              </view>
              <view class="vip-1-6-item">
                <view class="vip-1-6-item-img">
                  <image :src="imgApi+'images/wallet/icon-15.svg'" mode="scaleToFill" />
                </view>
                赠送1000旺币
              </view>
              <view class="vip-1-6-item">
                <view class="vip-1-6-item-img">
                  <image :src="imgApi+'images/wallet/icon-16.svg'" mode="scaleToFill" />
                </view>
                赠送认证店铺
              </view>
            </view>
            <view class="vip-1-6 flex" style="bottom: 90rpx;">
              <view class="vip-1-6-item">
                <view class="vip-1-6-item-img">
                  <image :src="imgApi+'images/wallet/icon-18.svg'" mode="scaleToFill" />
                </view>
                产业大会门票
              </view>
              <view class="vip-1-6-item">
                <view class="vip-1-6-item-img">
                  <image :src="imgApi+'images/wallet/icon-19.svg'" mode="scaleToFill" />
                </view>
                联盟成员单位授牌
              </view>
            </view>
          </view>
          <view class="vip-1-box-2">
            <view class="vip-1-2-1">会员礼遇豪礼盘点</view>
            <view class="vip-1-2-2">1.免费查看和联络所有的商户资源。</view>
            <view class="vip-1-2-2">2.享受免费专区内的下载方案的权限。</view>
            <view class="vip-1-2-2">3.享受购买方案会员的会员优惠价格。</view>
            <view class="vip-1-2-2">4.享受共享产品和海报的会员优惠价格。</view>
            <view class="vip-1-2-2">5.享受购买课程学习和活动参与的会员优惠价格。</view>
            <view class="vip-1-2-2">6.享受客户在所在地和目的地的提交需求的有限参与权。</view>
            <view class="vip-1-2-2">7.优于非会员获得当前地域内的优先排名。</view>
            <view class="vip-1-2-2">8.添加官方客服，免费加入蚂蚁团建社群结识资人脉源。</view>
            <view class="vip-1-2-1" style="width: 559rpx;margin-top: 60rpx;" @click="handleJoin">加入会员</view>
          </view>
        </view>
      </view>
    </view>
    <view class="vip-1" id="g2">
      <view class="vip-1-title">充值赠会员豪礼相送</view>
      <view class="vip-2-flex flex">
        <view class="vip-2-item" v-for="(item,index) in list" :key="index" @click="handleCheck(index)">
          套餐{{ index+1 }}
          <view class="vip-2-item-1 flex" :class="{'active':item.checked}">
            ￥{{ item.price }}
            <view>{{item.wb}}旺币</view>
          </view>
        </view>
        <view class="xuanze">已选择：充值{{price}}旺币</view>
        <view class="btn">立即充值</view>
      </view>
    </view>
    <view class="vip-3" id="g3">
      <view class="vip-3-title">购买加速包</view>
      <view class="vip-3-title">排名更靠前</view>
      <view class="tip">特别说明：同等加速包，发布动态活跃度越高，排名越前</view>
      <view class="vip-3-flex flex">
        <view class="xian" style="margin-right: 12rpx;"></view> 老师加速包 <view class="xian" style="margin-left: 12rpx;"></view>
      </view>
      <view class="vip-3-1 flex">
        <view class="vip-3-1-item">
          <view class="xt">成为精选老师</view>
          199元/年
          <view>本市/县优先排名</view>
          <view class="vip-3-1-btn">立即购买</view>
        </view>
        <view class="vip-3-1-item">
          <view class="xt">成为优选老师</view>
          399元/年
          <view>本省优先排名</view>
          <view class="vip-3-1-btn">立即购买</view>
        </view>
      </view>
      <view class="vip-3-2 flex">
        <view class="xt">成为特选老师</view>
        999元/年
        <view>全国优先排名</view>
        <view class="vip-3-1-btn">立即购买</view>
      </view>
    </view>
    <view id="g4">
      <view class="jiage flex">
        <view class="xian" style="margin-right: 12rpx;"></view> 更多链接、联系我们 <view class="xian" style="margin-left: 12rpx;"></view>
      </view>
      <view class="zi">
        <view class="zi-1">更多了解蚂蚁团建的资讯和服务</view>
        <view class="zi-2">请添加官方客服“然然”微信二维码</view>
        <view class="zi-2">也可以立即拨打电话 <span>18956079812</span></view>
      </view>
      <image src="" mode="scaleToFill" class="er-img" />
    </view>
    <view class="kong"></view>
  </view>
</template>
<script>
import { recharge } from "@/utils/request.js";
export default {
  data() {
    return {
      imgApi: this.$config.imgApi,
      list: [
        { price: "100", wb: "1000", checked: true },
        { price: "200", wb: "2000", checked: false },
        { price: "300", wb: "3000", checked: false },
        { price: "500", wb: "5000", checked: false },
        { price: "800", wb: "8000", checked: false },
        { price: "1000", wb: "10000", checked: false },
      ],
      price: "1000",
      active: 1,
      navList: [
        {
          text: "VIP会员",
        },
        { text: "充值豪礼" },
        { text: "排名加速包" },
        { text: "更多福利" },
      ],
      navIndex: 0, // 当前选中的选项卡索引
      sectionsTop: [], // 存储每个内容块的顶部距离
    };
  },
  mounted() {
    this.getSectionsTop(); // 初始化获取各部分位置
    // 监听页面滚动事件
    uni.$on("pageScroll", this.handlePageScroll);
  },
  beforeDestroy() {
    // 移除页面滚动事件监听
    uni.$off("pageScroll", this.handlePageScroll);
  },
  methods: {
    async recharge(data) {
      return await recharge(data);
    },
    handleJoin() {
      let data = { pay_way: "wechat_applet" };
      this.recharge(data).then((res) => {
        console.log(res, "rrr");
        // #ifdef MP-WEIXIN
        if (res.wechat_applet) {
          uni.requestPayment({
            timeStamp: res.wechat_applet.timeStamp,
            nonceStr: res.wechat_applet.nonceStr,
            package: res.wechat_applet.package,
            signType: res.wechat_applet.signType,
            paySign: res.wechat_applet.paySign,
            success: (res) => {
              uni.showToast({
                title: "支付成功",
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateBack({ delta: 1 });
              }, 1500);
            },
            faile: (err) => {
              console.log(err, "err");
            },
          });
        }
        // #endif
      });
    },
    handleCheck(index) {
      this.list.forEach((item, i) => {
        item.checked = false;
      });
      this.list[index].checked = true;
      this.price = this.list[index].wb;
    },
    getSectionsTop() {
      const query = uni.createSelectorQuery().in(this);
      const ids = ["#g1", "#g2", "#g3", "#g4"];
      ids.forEach((id, index) => {
        query.select(id).boundingClientRect((rect) => {
          this.$set(this.sectionsTop, index, rect.top); // 使用 $set 确保响应式更新
        });
      });
      query.exec();
    },
    handlechange(e) {
      this.navIndex = e.index; // 更新当前选中的选项卡索引
      uni.pageScrollTo({
        scrollTop: this.sectionsTop[e.index],
        duration: 500,
      });
    },
    handlePageScroll(e) {
      const scrollTop = e.scrollTop;
      for (let i = 0; i < this.sectionsTop.length; i++) {
        if (scrollTop >= this.sectionsTop[i] - 43) {
          // 43 是选项卡的高度
          this.navIndex = i;
          break;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  .active {
    box-shadow: 20rpx 20rpx 10rpx 20rpx #f59a23;
  }
  .zi {
    margin: 30rpx auto 0;
    text-align: center;
    .zi-1 {
      font-size: 24rpx;
      color: #fcdab0;
      span {
        color: #ffb850;
      }
    }
  }
  .er-img {
    width: 214rpx;
    height: 214rpx;
    margin: 19rpx auto;
    background: #ccc;
  }
  .xt {
    font-style: italic;
  }
  .kong {
    height: 200rpx;
  }
  .jiage {
    width: 677rpx;
    margin: 30rpx auto 0;
    font-size: 30rpx;
    color: #fcdab0;
    .xian {
      flex: 1;
      border: 1px dashed #fcdab0;
    }
  }
  .vip-3-1-btn {
    width: 150rpx;
    height: 53rpx;
    line-height: 53rpx;
    color: #fcdab0;
    border-radius: 64rpx;
    border: 1rpx solid#FCDAB0;
    margin: 16rpx auto 0;
    text-align: center;
    border-radius: 64rpx;
  }
  .vip-3 {
    width: 677rpx;
    margin: 35rpx auto 0;
    background: linear-gradient(to right, #ffbb50, #f6ead9, #fcd9ad);
    border-radius: 16rpx;
    padding: 30rpx 0;
    .vip-3-2 {
      width: 620rpx;
      margin: 12rpx auto 0;
      background: #000000;
      flex-direction: column;
      justify-content: center;
      font-size: 24rpx;
      color: #fcdab0;
      border-radius: 12rpx;
      padding: 28rpx 0;
    }
    .vip-3-1 {
      width: 620rpx;
      margin: 35rpx auto 0;
      justify-content: space-between;
      .vip-3-1-item {
        width: 300rpx;
        height: 200rpx;
        border-radius: 12rpx;
        background: #000000;
        color: #fcdab0;
        font-size: 24rpx;
        text-align: center;
        padding: 28rpx 0;
      }
    }
    .vip-3-title {
      margin-left: 62rpx;
      font-size: 53rpx;
      color: #000000;
      font-weight: bold;
    }
    .vip-3-flex {
      justify-content: space-between;
      font-size: 27rpx;
      .xian {
        border: 1rpx dashed #797979;
        flex: 1;
      }
    }
    .tip {
      text-align: center;
      font-size: 22rpx;
      color: #000000;
    }
  }
  .flex {
    flex-wrap: wrap;
  }
  .btn {
    width: 559rpx;
    height: 70rpx;
    line-height: 70rpx;
    background: #ffffff;
    color: #333333;
  }
  background-color: #000000;
  .vip-2-flex {
    justify-content: space-between;
    width: 92%;
    margin: 36rpx auto 0;
    .xuanze {
      font-size: 25rpx;
      color: #fcdab0;
      text-align: center;
      margin: 30rpx auto 0;
    }
    .vip-2-item {
      width: 214rpx;
      background: #ffbb50;
      padding-top: 10rpx;
      border-radius: 32rpx;
      font-size: 30rpx;
      color: #000000;
      text-align: center;
      overflow: hidden;
      margin-bottom: 65rpx;
      .vip-2-item-1 {
        width: 100%;
        margin-top: 10rpx;
        border-radius: 32rpx;
        background: #fef1e0;
        font-size: 30rpx;
        height: 209rpx;
        flex-direction: column;
        justify-content: center;
      }
    }
  }
  .vip-1 {
    margin-top: 32rpx;
    .vip-1-box-2 {
      margin: 20rpx auto 0;
      width: 84%;
      .vip-1-2-1 {
        width: 410rpx;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
        font-size: 40rpx;
        font-weight: bold;
        margin: 0 auto 30rpx;
        background: linear-gradient(to right, #ffbb50, #f6ead9, #fcd9ad);
        border-radius: 132rpx;
      }
      .vip-1-2-2 {
        font-size: 27rpx;
        color: #fcdab0;
        padding: 15rpx 0;
      }
    }
    .vip-1-box {
      width: 677rpx;
      margin: 138rpx auto 0;
      background: #333333;
      border-radius: 16rpx;
      position: relative;
      z-index: 99;
      padding-bottom: 34rpx;
      overflow: visible;
      .vip-1-box-1 {
        widows: 100%;
        height: 624rpx;
        position: relative;
        .back-img {
          position: absolute;
          top: -52rpx;
          left: 0;
          width: 100%;
          height: 624rpx;
          z-index: 0;
        }
        .vip-1-1 {
          font-size: 53rpx;
          font-weight: bold;
          color: #000;
          margin-left: 44rpx;
          position: relative;
          z-index: 99;
        }
        .vip-1-2 {
          font-size: 37rpx;
          font-weight: bold;
          color: #000;
          position: relative;
          z-index: 99;
          margin-left: 44rpx;
          span {
            color: #ffbb50;
          }
        }
        .vip-1-3 {
          position: absolute;
          top: 197rpx;
          left: 40%;
          color: #dfb78b;
          font-size: 30rpx;
        }
        .vip-1-4 {
          position: absolute;
          top: 250rpx;
          left: 37%;
          color: #dfb78b;
          font-size: 37rpx;
          z-index: 99;
        }
        .vip-1-5 {
          position: absolute;
          top: 341rpx;
          left: 34%;
          color: #333333;
          font-size: 30rpx;
          z-index: 99;
        }
        .vip-1-6 {
          position: absolute;
          bottom: 84rpx;
          left: 74rpx;
          width: 80%;
          .vip-1-6-item {
            flex: 1;
            font-size: 25rpx;
            color: #333333;
            text-align: center;
            .vip-1-6-item-img {
              width: 90rpx;
              height: 90rpx;
              background: #333333;
              border-radius: 50%;
              margin: 0 auto 13rpx;
              display: grid;
              place-items: center;
            }
            image {
              width: 48rpx;
              height: 42rpx;
            }
          }
        }
        .img-1 {
          position: absolute;
          top: 52rpx;
          right: 69rpx;
          width: 97rpx;
          height: 101rpx;
        }
      }
    }
    .vip-1-title {
      font-size: 62rpx;
      color: #dfb78b;
      width: 444rpx;
      margin: 0 auto;
    }
  }
  .wraps {
    padding-left: 30rpx;
    position: fixed;
    top: 0;
    left: 0;
    color: #ffbb50;
    padding-top: 28rpx;
    @include flex_style(flex-start, center, row nowrap);
    white-space: nowrap;
    border-bottom: 1rpx solid #ffbb50;
    .item {
      @include flex_style(flex-start, center, column nowrap);
      margin-right: 54rpx;
      text {
        font-size: 25rpx;
        font-weight: 400;
        line-height: 40rpx;
        color: #ffbb50;
      }
      .line {
        width: 120rpx;
        height: 8rpx;
        margin-top: 22rpx;
        background-color: #ffffff;
      }
    }

    .active {
      text {
        font-size: 30rpx;
        font-weight: bold;
      }

      .line {
        background-color: #ffb850;
      }
    }
  }
}
::v-deep .u-tabs {
  width: 100%;
  margin: 0 auto;
  text {
    font-size: 25rpx !important;
  }
}
</style>